本系列文章會在筆者的部落格繼續連載！Design System 101 感謝大家的閱讀！

前言

終於完賽了！!

Design System 對筆者來說是一個既熟悉又陌生的主題。隨著經驗的累積和視野的擴展，對於它的理解也在不斷的演變。

剛入行時，筆者認為它僅僅就是一個共用組件庫。但當換到更大一點的公司時，覺得它不僅僅是一個組件庫，更包括了 Design Token 與團隊對於 UI 的最佳實踐等等的。而到了現在，筆者認為它所要涵蓋的範圍更多了，但同時也覺得前面的兩種定義或許也都是正確的，只是隨著公司的規模和需求而有所不同。

如果團隊還沒有 Design System，且評估後想要導入它，不仿先從小的開始，將目前產品所有相似的 UI 彙整起來，這樣就是一個雛形了！不用一開始就想要達到大廠 open source 的做法，畢竟大廠的 Design System 也是經過不斷迭代而成的，先求有再求好即可！

最後不論實踐方式如何，想達到的目的都是一樣的，是想要透過視覺元素傳達品牌價值，是追求讓整個團隊用更有效的進行溝通，是追求讓產品開發更快並且保持一致性。

系列架構

Design System 參考程式碼

初探 Design System

1. 基本介紹
2. 設計標籤 Design Token
3. 可訪問性 Accessibility
4. i18n

Design System 架構建置

1. 專案建置 - 1, 專案建置 - 2
2. A11y - FocusScope 概念, 實作
3. A11y - FocusRing
4. React Slot 概念, 實作
5. Common Hooks 上, 下
6. CSS 建置 概念 實作
7. Layout 組件
8. Button 組件 設計, Ripple, 實作 - 上, 實作 - 下
9. 深淺模式

Design System 工作流程

1. Storybook 部署
2. 版本發佈與 Changelog 記錄
3. Github Action - CI Linting, Visual Regresssion Testing
4. 文檔建置

Design System 回顧

1. Design System 設計回顧

拋磚引玉

Awesome Design System

1. Adobe - React Spectrum
2. AWS - Cloudscape
3. Google - Material Design
4. Radix UI
5. Reach UI
6. Microsoft - Fluent UI

Awesome Blog / Book

1. Brad Frost - Atomic Design
2. Inclusive Components
3. Danny Banks - Creater of Style Dictionary
4. Michael Mangialardi - Design Token
5. THE A11Y PROJECT
6. Design System Checklist
7. A design systems publication by Figma

結論

但這趟旅程並為結束，也感謝各位讀者的閱讀！很開心自己能夠完賽，也感謝女友的支持！筆者會在個人部落格 繼續分享!